/* ECharts 柱状图 start */
// 基于准备好的dom，初始化echarts实例
var myChart_01 = echarts.init(document.getElementById('main_01'));

// 指定图表的配置项和数据
var option_01 = {
	title: {
		text: 'ECharts 柱状图'
	},
	tooltip: {},
	legend: {
		data: ['销量']
	},
	xAxis: {
		data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
		axisLabel: {
			interval: 0, //代表显示所有x轴标签显示
			rotate: 45, //代表逆时针旋转45度
		}
	},
	yAxis: {},
	series: [{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20]
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart_01.setOption(option_01);
/* ECharts 柱状图 end */

/* ECharts 折线图 start */
// 基于准备好的dom，初始化echarts实例
var myChart_02 = echarts.init(document.getElementById('main_02'));

// 指定图表的配置项和数据
option_02 = {
	title: {
		text: 'ECharts 折线图'
	},
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		data: [820, 932, 901, 934, 1290, 1330, 1320],
		type: 'line'
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart_02.setOption(option_02);
/* ECharts 折线图 end */

/* ECharts 漏斗图 start */
// 基于准备好的dom，初始化echarts实例
var myChart_03 = echarts.init(document.getElementById('main_03'));

// 指定图表的配置项和数据
option_03 = {
	title: {
		text: 'ECharts 漏斗图',
		subtext: '纯属虚构'
	},
	tooltip: {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c}%"
	},
	toolbox: {
		feature: {
			dataView: {
				readOnly: false
			},
			restore: {},
			saveAsImage: {}
		}
	},
	legend: {
		data: ['展现', '点击', '访问', '咨询', '订单']
	},

	series: [{
		name: '漏斗图',
		type: 'funnel',
		left: '10%',
		top: 60,
		//x2: 80,
		bottom: 60,
		width: '80%',
		// height: {totalHeight} - y - y2,
		min: 0,
		max: 100,
		minSize: '0%',
		maxSize: '100%',
		sort: 'descending',
		gap: 2,
		label: {
			show: true,
			position: 'inside'
		},
		labelLine: {
			length: 10,
			lineStyle: {
				width: 1,
				type: 'solid'
			}
		},
		itemStyle: {
			borderColor: '#fff',
			borderWidth: 1
		},
		emphasis: {
			label: {
				fontSize: 20
			}
		},
		data: [{
				value: 60,
				name: '访问'
			},
			{
				value: 40,
				name: '咨询'
			},
			{
				value: 20,
				name: '订单'
			},
			{
				value: 80,
				name: '点击'
			},
			{
				value: 100,
				name: '展现'
			}
		]
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart_03.setOption(option_03);
/* ECharts 漏斗图 end */

/* ECharts 热门排行 start */
// 基于准备好的dom，初始化echarts实例
var myChart_04 = echarts.init(document.getElementById('main_04'));

// 指定图表的配置项和数据

var builderJson = {
	"all": 10887,
	"charts": {
		"map": 3237,
		"lines": 2164,
		"bar": 7561,
		"line": 7778,
		"pie": 7355,
		"scatter": 2405,
		"candlestick": 1842,
		"radar": 2090,
		"heatmap": 1762,
		"treemap": 1593,
		"graph": 2060,
		"boxplot": 1537,
		"parallel": 1908,
		"gauge": 2107,
		"funnel": 1692,
		"sankey": 1568
	},
	"components": {
		"geo": 2788,
		"title": 9575,
		"legend": 9400,
		"tooltip": 9466,
		"grid": 9266,
		"markPoint": 3419,
		"markLine": 2984,
		"timeline": 2739,
		"dataZoom": 2744,
		"visualMap": 2466,
		"toolbox": 3034,
		"polar": 1945
	},
	"ie": 9743
};

var downloadJson = {
	"echarts.min.js": 17365,
	"echarts.simple.min.js": 4079,
	"echarts.common.min.js": 6929,
	"echarts.js": 14890
};

var themeJson = {
	"dark.js": 1594,
	"infographic.js": 925,
	"shine.js": 1608,
	"roma.js": 721,
	"macarons.js": 2179,
	"vintage.js": 1982
};

var waterMarkText = 'ECHARTS';

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);

option_04 = {
	backgroundColor: {
		type: 'pattern',
		image: canvas,
		repeat: 'repeat'
	},
	tooltip: {},
	title: [{
		text: '热门排行',
		subtext: '总计 ' + builderJson.all,
		left: '25%',
		textAlign: 'center'
	}, {
		text: '品牌',
		subtext: '总计 ' + Object.keys(downloadJson).reduce(function(all, key) {
			return all + downloadJson[key];
		}, 0),
		left: '75%',
		textAlign: 'center'
	}, {
		text: '分类',
		subtext: '总计 ' + Object.keys(themeJson).reduce(function(all, key) {
			return all + themeJson[key];
		}, 0),
		left: '75%',
		top: '50%',
		textAlign: 'center'
	}],
	grid: [{
		top: 50,
		width: '50%',
		bottom: '45%',
		left: 10,
		containLabel: true
	}, {
		top: '55%',
		width: '50%',
		bottom: 0,
		left: 10,
		containLabel: true
	}],
	xAxis: [{
		type: 'value',
		max: builderJson.all,
		splitLine: {
			show: false
		}
	}, {
		type: 'value',
		max: builderJson.all,
		gridIndex: 1,
		splitLine: {
			show: false
		}
	}],
	yAxis: [{
		type: 'category',
		data: Object.keys(builderJson.charts),
		axisLabel: {
			interval: 0,
			rotate: 30
		},
		splitLine: {
			show: false
		}
	}, {
		gridIndex: 1,
		type: 'category',
		data: Object.keys(builderJson.components),
		axisLabel: {
			interval: 0,
			rotate: 30
		},
		splitLine: {
			show: false
		}
	}],
	series: [{
		type: 'bar',
		stack: 'chart',
		z: 3,
		label: {
			normal: {
				position: 'right',
				show: true
			}
		},
		data: Object.keys(builderJson.charts).map(function(key) {
			return builderJson.charts[key];
		})
	}, {
		type: 'bar',
		stack: 'chart',
		silent: true,
		itemStyle: {
			normal: {
				color: '#eee'
			}
		},
		data: Object.keys(builderJson.charts).map(function(key) {
			return builderJson.all - builderJson.charts[key];
		})
	}, {
		type: 'bar',
		stack: 'component',
		xAxisIndex: 1,
		yAxisIndex: 1,
		z: 3,
		label: {
			normal: {
				position: 'right',
				show: true
			}
		},
		data: Object.keys(builderJson.components).map(function(key) {
			return builderJson.components[key];
		})
	}, {
		type: 'bar',
		stack: 'component',
		silent: true,
		xAxisIndex: 1,
		yAxisIndex: 1,
		itemStyle: {
			normal: {
				color: '#eee'
			}
		},
		data: Object.keys(builderJson.components).map(function(key) {
			return builderJson.all - builderJson.components[key];
		})
	}, {
		type: 'pie',
		radius: [0, '30%'],
		center: ['75%', '25%'],
		data: Object.keys(downloadJson).map(function(key) {
			return {
				name: key.replace('.js', ''),
				value: downloadJson[key]
			}
		})
	}, {
		type: 'pie',
		radius: [0, '30%'],
		center: ['75%', '75%'],
		data: Object.keys(themeJson).map(function(key) {
			return {
				name: key.replace('.js', ''),
				value: themeJson[key]
			};
		})
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart_04.setOption(option_04);
/* ECharts 热门排行 end */

/* ECharts 柱状图堆叠 start*/
// 基于准备好的dom，初始化echarts实例
var myChart_05 = echarts.init(document.getElementById('main_05'));

// 指定图表的配置项和数据
option_05 = {
	title: {
		text: '某地区蒸发量和降水量',
		subtext: '纯属虚构'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['蒸发量', '降水量']
	},
	toolbox: {
		show: true,
		feature: {
			dataView: {
				show: true,
				readOnly: false
			},
			magicType: {
				show: true,
				type: ['line', 'bar']
			},
			restore: {
				show: true
			},
			saveAsImage: {
				show: true
			}
		}
	},
	calculable: true,
	xAxis: [{
		type: 'category',
		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	}],
	yAxis: [{
		type: 'value'
	}],
	series: [{
			name: '蒸发量',
			type: 'bar',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
			markPoint: {
				data: [{
						type: 'max',
						name: '最大值'
					},
					{
						type: 'min',
						name: '最小值'
					}
				]
			},
			markLine: {
				data: [{
					type: 'average',
					name: '平均值'
				}]
			}
		},
		{
			name: '降水量',
			type: 'bar',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
			markPoint: {
				data: [{
						name: '年最高',
						value: 182.2,
						xAxis: 7,
						yAxis: 183
					},
					{
						name: '年最低',
						value: 2.3,
						xAxis: 11,
						yAxis: 3
					}
				]
			},
			markLine: {
				data: [{
					type: 'average',
					name: '平均值'
				}]
			}
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart_05.setOption(option_05);
/* ECharts 柱状图堆叠 end */

/* ECharts 折线图堆叠 start */
// 基于准备好的dom，初始化echarts实例
var myChart_06 = echarts.init(document.getElementById('main_06'));

// 指定图表的配置项和数据
option_06 = {
	title: {
		text: '折线图堆叠'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	toolbox: {
		feature: {
			saveAsImage: {}
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	},
	yAxis: {
		type: 'value'
	},
	series: [{
			name: '邮件营销',
			type: 'line',
			stack: '总量',
			data: [120, 132, 101, 134, 90, 230, 210]
		},
		{
			name: '联盟广告',
			type: 'line',
			stack: '总量',
			data: [220, 182, 191, 234, 290, 330, 310]
		},
		{
			name: '视频广告',
			type: 'line',
			stack: '总量',
			data: [150, 232, 201, 154, 190, 330, 410]
		},
		{
			name: '直接访问',
			type: 'line',
			stack: '总量',
			data: [320, 332, 301, 334, 390, 330, 320]
		},
		{
			name: '搜索引擎',
			type: 'line',
			stack: '总量',
			data: [820, 932, 901, 934, 1290, 1330, 1320]
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart_06.setOption(option_06);
/* ECharts 折线图堆叠 end */

/* ECharts 月饼图 start */
// 基于准备好的dom，初始化echarts实例
var myChart_07 = echarts.init(document.getElementById('main_07'));
var app = {};
option_07 = null;
var cellSize = [80, 80];
var pieRadius = 30;

function getVirtulData() {
	var date = +echarts.number.parseDate('2020-08-01');
	var end = +echarts.number.parseDate('2020-09-01');
	var dayTime = 3600 * 24 * 1000;
	var data = [];
	for (var time = date; time < end; time += dayTime) {
		data.push([
			echarts.format.formatTime('yyyy-MM-dd', time),
			Math.floor(Math.random() * 10000)
		]);
	}
	return data;
}

function getPieSeries(scatterData, chart) {
	return echarts.util.map(scatterData, function(item, index) {
		var center = chart.convertToPixel('calendar', item);
		return {
			id: index + 'pie',
			type: 'pie',
			center: center,
			label: {
				normal: {
					formatter: '{c}',
					position: 'inside'
				}
			},
			radius: pieRadius,
			data: [{
					name: '工作',
					value: Math.round(Math.random() * 24)
				},
				{
					name: '娱乐',
					value: Math.round(Math.random() * 24)
				},
				{
					name: '睡觉',
					value: Math.round(Math.random() * 24)
				}
			]
		};
	});
}

function getPieSeriesUpdate(scatterData, chart) {
	return echarts.util.map(scatterData, function(item, index) {
		var center = chart.convertToPixel('calendar', item);
		return {
			id: index + 'pie',
			center: center
		};
	});
}

var scatterData = getVirtulData();

option_07 = {
	title: {
		text: 'ECharts 2020-08饼图'
	},
	tooltip: {},
	legend: {
		data: ['工作', '娱乐', '睡觉'],
		bottom: 20
	},
	calendar: {
		top: 'middle',
		left: 'center',
		orient: 'vertical',
		cellSize: cellSize,
		yearLabel: {
			show: false,
			textStyle: {
				fontSize: 30
			}
		},
		dayLabel: {
			margin: 20,
			firstDay: 1,
			nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
		},
		monthLabel: {
			show: false
		},
		range: ['2020-08']
	},
	series: [{
		id: 'label',
		type: 'scatter',
		coordinateSystem: 'calendar',
		symbolSize: 1,
		label: {
			normal: {
				show: true,
				formatter: function(params) {
					return echarts.format.formatTime('dd', params.value[0]);
				},
				offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
				textStyle: {
					color: '#000',
					fontSize: 14
				}
			}
		},
		data: scatterData
	}]
};

var pieInitialized;
setTimeout(function() {
	pieInitialized = true;
	myChart_07.setOption({
		series: getPieSeries(scatterData, myChart_07)
	});
}, 10);

app.onresize = function() {
	if (pieInitialized) {
		myChart_07.setOption({
			series: getPieSeriesUpdate(scatterData, myChart_07)
		});
	}
};;
if (option_07 && typeof option_07 === "object") {
	myChart_07.setOption(option_07, true);
}
/* ECharts 月饼图 end */

/* ECharts 雷达图 start */
// 基于准备好的dom，初始化echarts实例
var myChart_08 = echarts.init(document.getElementById('main_08'));

// 指定图表的配置项和数据
option_08 = {
	title: {
		text: 'ECharts 雷达图'
	},
	tooltip: {},
	legend: {
		data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
	},
	radar: {
		// shape: 'circle',
		name: {
			textStyle: {
				color: '#fff',
				backgroundColor: '#999',
				borderRadius: 3,
				padding: [3, 5]
			}
		},
		indicator: [{
				name: '销售（sales）',
				max: 6500
			},
			{
				name: '管理（Administration）',
				max: 16000
			},
			{
				name: '信息技术（Information Techology）',
				max: 30000
			},
			{
				name: '客服（Customer Support）',
				max: 38000
			},
			{
				name: '研发（Development）',
				max: 52000
			},
			{
				name: '市场（Marketing）',
				max: 25000
			}
		]
	},
	series: [{
		name: '预算 vs 开销（Budget vs spending）',
		type: 'radar',
		// areaStyle: {normal: {}},
		data: [{
				value: [4300, 10000, 28000, 35000, 50000, 19000],
				name: '预算分配（Allocated Budget）'
			},
			{
				value: [5000, 14000, 28000, 31000, 42000, 21000],
				name: '实际开销（Actual Spending）'
			}
		]
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart_08.setOption(option_08);
/* ECharts 雷达图 end */
